<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="欢迎登录小v商城" left-arrow @click-left="$router.back()"/>
    </header>
    <section class="content">
      <van-field v-model="tel" v-show="loginFlag" type="tel" maxlength="11" placeholder="请输入手机号" clearable/>
      <van-field v-model="loginname" v-show="!loginFlag" type="loginname" maxlength="11" placeholder="用户名 | 邮箱 | 手机号" clearable/>
      <van-field :value="telCode" readonly v-show="loginFlag" clearable  placeholder="请输入收到的验证码" @click.native.stop="show=true">
        <template #button>
          <van-button size="small" :disabled="flag" round type="danger" @click.stop="sendCode">{{ btncontent }}</van-button>
        </template>
      </van-field>
      <van-field v-model="password" type="password" v-show="!loginFlag" placeholder="请输入密码" clearable/>
      <van-number-keyboard v-model="telCode" :show="show" maxlength="5" @blur="show = false"/>
      <!-- maxlength:输入值的最大长度 -->
      <van-button class="mybtn" block round v-show="loginFlag" @click="login" :disabled="btnFlag"  color="linear-gradient(to left, #ff6034, #ee0a24)">登录</van-button>
      <van-button class="mybtn" block round v-show="!loginFlag" @click="pwdLogin" :disabled="btnFlag"  color="linear-gradient(to left, #ff6034, #ee0a24)">登录</van-button>
      <span class="changemsg" v-show="loginFlag" @click="changeLoginType" >账号密码登录</span>
      <span class="changemsg" @click="changeLoginType" v-show="!loginFlag">短信验证码登录</span>
      <span class="telLogin" @click="$router.push('/register')">手机快速注册</span>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Button, Dialog, Image as VanImage, NumberKeyboard, Toast } from 'vant'
import { dosendloginCode, dosmslogin, domlogin } from '@/api'
import { mapMutations } from 'vuex'

Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(VanImage)
Vue.use(NumberKeyboard)
Vue.use(Toast)

export default {
  data () {
    return {
      tel: '',
      loginname: '',
      telCode: '',
      password: '',
      show: false,
      btncontent: '获取验证码',
      timer: null,
      flag: false,
      loginFlag: true,
      reg: /^1[3456789]\d{9}$/
    }
  },
  mounted () {
    // 发送短信验证码+倒计时
    // this.sendCode()
  },
  watch: {
    telCode (newVal) {
      if (newVal.length === 5) {
        this.show = false
      }
    }
  },
  methods: {
    ...mapMutations({ changeLoginstate: 'user/change_login_state' }),
    changeLoginType () {
      if (this.loginFlag === true) {
        this.loginFlag = false
      } else {
        this.loginFlag = true
      }
    },
    sendCode () {
      // 验证码倒计时
      let time = 30
      this.timer = setInterval(() => {
        time--
        if (time <= 0) {
          this.btncontent = '获取验证码'
          this.flag = false
          clearInterval(this.timer)
          // console.log(this.telCode)
        } else {
          this.flag = true
          this.btncontent = '重新发送(' + time + 's)'
        }
      }, 1000)
      dosendloginCode({
        tel: this.tel
      }).then(res => {
        if (res.data.code === '1005') {
          this.$router.push('/register')
        } else {

        }
      })
    },
    login () {
      // console.log('login')
      dosmslogin({
        tel: this.tel,
        telCode: this.telCode
      }).then(res => {
        // console.log(res.data)
        if (res.data.code === '1006') {
          Toast('验证码输入错误')
        } else if (res.data.code === '1005') {
          Toast('该用户还未注册')
        } else {
          localStorage.setItem('userid', res.data.data.userid)
          localStorage.setItem('loginState', true)
          this.changeLoginstate(true)
          this.$router.back()
        }
      })
    },
    pwdLogin () {
      domlogin({
        loginname: this.loginname,
        password: this.password
      }).then(res => {
        if (res.data.code === '1005') {
          Toast('该用户还未注册')
        } else if (res.data.code === '1007') {
          Toast('密码输入错误')
        } else {
          Toast('登录成功')
          localStorage.setItem('userid', res.data.data.userid)
          localStorage.setItem('token', res.data.data.token)
          localStorage.setItem('loginState', true)
          this.changeLoginstate(true)
          this.$router.back()
        }
      })
    }
  },
  computed: {
    btnFlag () {
      if (this.telCode.length === 5 || this.password !== '') {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  padding: 0 25px 25px;
  background: #fff;
  .content{
    .changemsg{
      display: block;
      font-size: 12px;
      margin-top: 20px;
      color: #666;
      float: left;
    }
    .telLogin{
      font-size: 12px;
      color:#666;
      float: right;
      margin-top: 20px;
    }
  }
}
</style>
